<template>
    <div class="post-box">
        <div class='titlePic'>
        </div>
        <div class="article">
            <h3>
            <RouterLink :to="props.article.url" style="text-decoration: none; color: #545454">
                {{article.title}}
            </RouterLink>
 
            </h3>
            <span class='summary'>
                {{article.content}}
            </span>
        </div>
        <div class='messagebox'>
            <el-icon class='messagebox-icon'><Avatar /></el-icon>
            <span class='messagebox-item'>{{article.author}}</span>
            <el-icon class='messagebox-icon'><Clock /></el-icon>
            <span class='messagebox-item'>{{article.datetime}}</span>
        </div>
        <div >
        
        </div>
    </div>
</template>

<script setup>
    const props = defineProps({
        article: Object,
    })

    // 日期标准化方法，ai写的，大概看了一下应该问题不大，可能正则表达式需要调整下?
    const standDate = date => {
        const regex = /(\d{4})-(\d{2})-(\d{2})/;
        if (!date) {
            return date
        }

        const match = date.match(regex);
        if (match) {
            // 获取捕获的组
            const year = match[1]; // 年
            const month = match[2]; // 月
            const day = match[3]; // 日
            
            // 转换为目标格式
            return `${year}年${parseInt(month)}月${parseInt(day)}日`;
        }
    }
    props.article.datetime = standDate(props.article.datetime)
    props.article.url = "/article/" + props.article.aid
</script>

<style src="@/styles/components/Post.scss" scoped>


</style>